<template>
  <el-drawer v-model="drawer" :title="$t('message.dictItem.detail')" size="40%">
    <div
      class="head-container"
      :style="{
        padding: '10px',
        background: '#fff',
      }"
    >
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="handleValueAdd"
      >
        {{ $t('message.operate.add') }}
      </el-button>
      <!--表格渲染-->
      <el-table
        v-loading="loading"
        :data="dictDetailData"
        border
        row-key="id"
        height="80vh"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="itemText" :label="$t('message.dictItem.name')" />
        <el-table-column prop="itemValue" :label="$t('message.dictItem.value')" />
        <el-table-column
          prop="sort"
          :label="$t('message.dictItem.SerialNum')"
          width="80px"
          align="center"
        />
        <el-table-column :label="$t('message.operate.name')" width="200px" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-circle-plus-outline"
              @click="handleAddChildren(scope.row)"
            >
              {{ $t('message.dictItem.children') }}
            </el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleValueEdit(scope.row)">
              {{ $t('message.operate.edit') }}
            </el-button>
            <el-button :loading="loading" type="text" @click="subDelete(scope.row.id)">
              {{ $t('message.operate.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          v-model="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
        v-model="dialog"
        :append-to-body="true"
        :title="isValueAdd"
        width="800px"
        @closed="close"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item
            v-if="isValueAdd == $t('message.dictItem.addChildren')"
            :label="$t('message.dictItem.upperLevel')"
            prop="upperLevel"
          >
            <el-input v-model="form.upperLevel" style="width: 370px" disabled />
          </el-form-item>
          <el-form-item :label="$t('message.dictItem.name')" prop="itemText">
            <el-input v-model="form.itemText" style="width: 370px" />
          </el-form-item>
          <el-form-item :label="$t('message.dictItem.value')" prop="itemValue">
            <el-input v-model="form.itemValue" style="width: 370px" />
          </el-form-item>
          <el-form-item :label="$t('message.dictItem.description')">
            <el-input v-model="form.description" style="width: 370px" />
          </el-form-item>
          <el-form-item :label="$t('message.dictItem.status')" prop="status">
            <el-select v-model="form.status" placeholder="请选择" style="width: 370px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.dictItem.SerialNum')" prop="sort">
            <el-input-number v-model="form.sort" :min="1" />
          </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
          <el-button type="text" @click="dialog = false">取消</el-button>
          <el-button :loading="loading" type="primary" @click="doDetailSubmit">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </el-drawer>
</template>

<script>
import { addDictItem, updateDictItem, queryDictItemList, deleteDictItem } from '../../api/dict'

const defaultForm = {
  dictId: '',
  itemText: '',
  itemValue: '',
  description: '',
  status: '',
  sort: '1',
}

export default {
  name: 'DictItem',
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      loading: false,
      dictDetailData: [],
      dialog: false,
      form: defaultForm,
      isValueAdd: '',
      rules: {
        itemText: [
          { required: true, message: this.$i18n.t('message.validate.required'), trigger: 'blur' },
        ],
        itemValue: [
          { required: true, message: this.$i18n.t('message.validate.required'), trigger: 'blur' },
        ],
        status: [
          { required: true, message: this.$i18n.t('message.validate.required'), trigger: 'change' },
        ],
      },
      dictId: '',
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总数量
      options: [
        {
          value: 0,
          label: '否',
        },
        {
          value: 1,
          label: '是',
        },
      ],
    }
  },
  methods: {
    // 添加字典值
    handleValueAdd: function () {
      this.dialog = true
      this.isValueAdd = this.$i18n.t('message.dictItem.add')
      this.form = {...defaultForm}
      this.form.description = ''
      this.form.status = 1
    },
    // 编辑字典值
    handleValueEdit: function (row) {
      this.dialog = true
      this.isValueAdd = this.$i18n.t('message.dictItem.edit')
      this.form = { ...row }
      this.form.name = this.dictName
    },
    // 新增子级字典
    handleAddChildren: function (row) {
      this.dialog = true
      this.isValueAdd = this.$i18n.t('message.dictItem.addChildren')
      this.form = {...defaultForm}
      this.form.upperLevel = row.itemText
      this.form.parentId = row.id
    },
    close() {
      this.resetForm('form')
    },
    // 删除操作
    subDelete(val) {
      this.drawer = false
      this.$confirm(
        this.$i18n.t('message.dictItem.isDelete'),
        this.$i18n.t('message.validate.hint'),
        {
          confirmButtonText: this.$i18n.t('message.operate.confirm'),
          cancelButtonText: this.$i18n.t('message.operate.cancel'),
          type: 'warning',
        }
      ).then(() => {
        deleteDictItem(val)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message({ message: res.data.msg, type: 'success' })
              this.doSubmit(this.dictId)
              this.resetForm('form')
            }
          })
          .catch((err) => {
            console.error(err.response.data.msg)
          })
      })
      this.drawer = true
    },
    // 字典值提交操作
    doDetailSubmit() {
      this.drawer = false
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isValueAdd == this.$i18n.t('message.dictItem.add')) {
            this.form.parentId = ''
            // 新增字典
            addDictItem(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: res.data.msg, type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.doSubmit(this.dictId)
              this.resetForm('form')
            })
          } else if (this.isValueAdd == this.$i18n.t('message.dictItem.edit')) {
            // 更新字典
            updateDictItem(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: res.data.msg, type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.doSubmit(this.dictId)
              this.resetForm('form')
            })
          } else {
            this.form.dictId = ''
            // 新增子级
            addDictItem(this.form).then((res) => {
              if (res.data.code === 200) {
                this.$message({ message: res.data.msg, type: 'success' })
              } else {
                this.$message({ message: res.data.msg, type: 'error' })
              }
              this.dialog = false
              this.doSubmit(this.dictId)
              this.resetForm('form')
            })
          }
        }
      })
      this.drawer = true
    },
    doSubmit(val) {
      this.drawer = true
      if (val) {
        console.log(val, 'val')
        this.dictId = val
        this.form.dictId = this.dictId
        console.log(this.form.dictId, 'this.form.dictId')
        console.log(this.dictId, 'this.dictId')

        const params = new URLSearchParams()
        params.append('dictId', this.dictId)
        params.append('current', this.currentPage)
        params.append('size', this.pageSize)
        console.log(params, 'params')
        this.loading = true
        queryDictItemList(params).then((res) => {
          this.loading = false
          this.dictDetailData = res.data.data.records
          this.total = res.data.data.total
          this.currentPage = res.data.data.current
        })
      }
    },
    // 换页
    handleCurrentChange: function (val) {
      this.currentPage = val
      this.doSubmit(this.dictId)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style scoped lang="scss">
.el-form {
  .el-form-item {
    width: 65%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
}
</style>
